<template>
  <div>
    <el-form style="width: 100%" :inline="true" class="no-print">
      <el-form-item label="日期:">
        <el-date-picker
          v-model="time"
          type="monthrange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          value-format="timestamp"
          @change="change"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>

      <el-button type="primary" icon="el-icon-printer" @click="printTab()">打印</el-button>
    </el-form>

    <div style="width: 100%;overflow-x: hidden;text-align: center;padding: 10px;" class="print" ref="print">
      <statistics class="no-print" v-if="userWage.length != 0" id="expenditure" title="应发工资" :item-list="expenditureList" :item-list-msg="expenditureMsgList" style="width: 50%;float: left"></statistics>
      <statistics class="no-print" v-if="userWage.length != 0" id="income" title="代扣代缴"  :item-list="incomeList" :item-list-msg="incomeListMsg" style="width: 50%;float: left"></statistics>
      <h2>工资汇总</h2>
      <el-table
        :data="userWage"
        stripe
        border
        style="width: 100%;">
        <el-table-column
          label="时间"
          align="center"
          :formatter="dateFormat"
          prop="time">
        </el-table-column>
        <el-table-column
          label="应发工资"
          align="center"
          prop="应发工资">
        </el-table-column>
        <el-table-column
          label="实发工资"
          align="center"
          prop="实发工资">
        </el-table-column>
      </el-table>
      <h2>应发工资</h2>
      <el-table
        :data="userWage"
        stripe
        border
        style="width: 100%;">
        <el-table-column
          label="日期"
          align="center"
          :formatter="dateFormat"
          prop="time">
        </el-table-column>
        <el-table-column
          v-for="item in expenditureList"
          :label="item"
          :class="item"
          :formatter="statusFormat"
          align="center"
          :prop="item">
        </el-table-column>
      </el-table>
      <h2>代扣代缴</h2>
      <el-table
        :data="userWage"
        stripe
        border
        style="width: 100%;">
        <el-table-column
          label="日期"
          align="center"
          :formatter="dateFormat"
          prop="time">
        </el-table-column>
        <el-table-column
          v-for="item in incomeList"
          :label="item"
          :formatter="statusFormat"
          align="center"
          :prop="item">
        </el-table-column>

      </el-table>
    </div>
  </div>
</template>

<script>
    import statistics from '../../components/statistics'
    import wageMsg from "../../utils/wageMsg";
    import {findTime,findByIncome} from "../../axios/api"
    import moment from 'moment'
    export default {
        name: "wage",
        components:{
            statistics
        },
        data(){
            return{
                time:[],
                userWage:[],
                expenditureList:[],
                expenditureMsgList:wageMsg.expenditureMsgList,
                incomeList:[],
                incomeListMsg:wageMsg.incomeListMsg,
                pickerOptions: {
                    shortcuts: [{
                        text: '本月',
                        onClick(picker) {
                            picker.$emit('pick', [new Date(), new Date()]);
                        }
                    }, {
                        text: '今年至今',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date(new Date().getFullYear(), 0);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近六个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setMonth(start.getMonth() - 6);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value1: '',
                value2: ''
            }
        },
        mounted() {
            let myDate = new Date();
            this.time.push(this.computeTime(myDate.getFullYear(),myDate.getMonth()+1));
            this.time.push(this.computeTime(myDate.getFullYear(),myDate.getMonth()+1));
            this.getTitleType();
        },
        methods:{
            // rowClass({row, column, rowIndex, columnIndex}) {
            //     console.log(row)
            //
            //     if (row[column.label] === undefined){
            //         column.width = 0
            //         document.getElementsByClassName(column.id)[0].style.display = "none"
            //         document.getElementsByClassName(column.id)[0].style.width = "none"
            //         return 'background:#000;color:#555;display: none'
            //     }else{
            //         column.width = 100
            //     }
            //
            // },
            statusFormat: function(row, column) {
                if (row[column.label] === undefined || row[column.label] === ""){
                    document.getElementsByClassName(column.label)
                    return "0.0";
                }else{
                    return row[column.label];
                }
            },
            printTab(){
                this.$print(this.$refs.print)
            },
            getTitleType:async function(){
                let res = await findByIncome();
                if (res.code === 0){
                    let than = this;
                    res.data.forEach(function (data,i,a) {
                        // than.tableTitle.push({label:data.title,prop:data.title})
                        if (data.isIncome){
                            than.expenditureList.push(data.title);
                        }else{
                            than.incomeList.push(data.title);
                        }
                    });
                    this.getMSG(this.time[0],this.time[1]);
                }
            },
            getMSG:async function(startTime,endTime){
                let data = {
                    id_card:localStorage.getItem("userName"),
                    start_time:startTime,
                    end_time:endTime
                };
                let res = await findTime(data);

                if (res.code === 0){
                    let wages = [];
                    res.data.forEach(function (data,i,a) {
                        let item = eval('(' +data.salaryData+ ')');
                        item["time"] = parseInt(data.time);
                        wages.push(item)

                    });
                    let exMsgList = [];
                    this.expenditureList.forEach(function (data,i,a) {
                        let num = 0;
                        wages.forEach(function (data1,i1,a1) {
                            num = num + parseInt(data1[data])
                        })
                        exMsgList.push({value:num,name:data})
                    });
                    let inMsgList = [];
                    this.incomeList.forEach(function (data,i,a) {
                        let num = 0;
                        wages.forEach(function (data1,i1,a1) {
                            num = num + parseInt(data1[data])
                        })
                        inMsgList.push({value:num,name:data})
                    });
                    this.expenditureMsgList = exMsgList;
                    this.incomeListMsg = inMsgList;


                    this.userWage = wages;

                }

            },
            change(val){
                this.getMSG(val[0],val[1]);
            },
            dateFormat:function(row, column) {
                var date = row.time;
                if (date == undefined) {
                    return "";
                }
                return moment(parseInt(date)).format("YYYY-MM");
            },
        }
    }
</script>

<style scoped>

</style>
